<template>
    <div class="page">
        <p>饼图</p>
        <div id="container"></div>
        <p>饼图</p>
        <div id="container1"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    methods: {
        draw() {
            let data = [
                { startAngle: 0, endAngle: Math.PI * 0.6 },
                { startAngle: Math.PI * 0.6, endAngle: Math.PI * 0.7 },
                { startAngle: Math.PI * 0.7, endAngle: Math.PI * 0.9 },
                { startAngle: Math.PI * 0.9, endAngle: Math.PI * 1.7 },
                { startAngle: Math.PI * 1.7, endAngle: Math.PI * 2 }
            ]
            let arc = d3
                    .arc()
                    .innerRadius(30)
                    .outerRadius(100),
                colors = d3.schemeCategory10
            //预先定义好，svg的大小，以及 在svg内部作画的时候 各种padding的值
            let svgWidth = 400,
                svgHeight = 400
            //使用d3创建一个svg元素
            let svg = (this.svg = d3.select("#container").append("svg"))
            //设置svg的宽高
            svg.attr("width", svgWidth).attr("height", svgHeight)
            svg.selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .attr("d", d => arc(d))
                .attr("stroke", "orange")
                .attr("stroke-width", "2px")
                .attr("fill", (d, i) => colors[i])
                .attr("transform", `translate(200,200)`)
            svg.selectAll("text")
                .data(data)
                .enter()
                .append("text")
                .attr("transform", d => {
                    return `translate(200,200) translate(${arc.centroid(d)})`
                })
                .text(d => {
                    return `${((d.endAngle - d.startAngle) * 180) / Math.PI}°`
                })
                .attr("fill", "#fff")
                .attr("text-anchor", "middle")
                .attr("font-size", "12px")
        },
        drawPie() {
            //预先定义好，svg的大小，以及 在svg内部作画的时候 各种padding的值
            let svgWidth = 400,
                svgHeight = 400
            //使用d3创建一个svg元素
            let svg = (this.svg = d3.select("#container1").append("svg"))
            //设置svg的宽高
            svg.attr("width", svgWidth).attr("height", svgHeight)
            let data = [
                { name: "小米", data: 60.8 },
                { name: "三星", data: 58.4 },
                { name: "联想", data: 47.3 },
                { name: "苹果", data: 46.6 },
                { name: "华为", data: 41.3 },
                { name: "酷派", data: 40.1 },
                { name: "其它", data: 111.5 }
            ]
            let pieCreator = d3.pie().value(d => d.data),pieData = pieCreator(data);
            let arc = d3
                .arc()
                .innerRadius(30)
                .outerRadius(100),
                arc1 = d3.arc()//创建本弧度创造器的目的是为了 画线的时候取内半径为0的情况的坐标
                .innerRadius(0)
                .outerRadius(100),
                colors = d3.schemeCategory10;
            let groupArc = svg.selectAll('g').data(pieData)
            .enter()
            .append('g')
            .attr('transform',`translate(${svgWidth/2},${svgHeight/2})`);
            // let lineCreator = d3.line();
            groupArc.append('path')
            .attr('d',d=>arc(d))
            .attr('stroke','orange')
            .attr('stroke-width','2px')
            .attr('fill',(d,i)=>colors[i]);
            groupArc.append('text')
            .text(d=>d.data.name)
            .attr('transform',d=>`translate(${arc.centroid(d)})`)
            .attr('fill','#fff')
            .attr('text-anchor','middle')
            .attr('font-size','13px');
            groupArc.append('line')
            .attr('x1',d=>{
                console.log(arc.centroid(d),arc1.centroid(d))
                return arc1.centroid(d)[0]*2
            })
            .attr('y1',d=>arc1.centroid(d)[1]*2)
            .attr('x2',d=>arc1.centroid(d)[0]*2.7)
            .attr('y2',d=>arc1.centroid(d)[1]*2.7)
            .attr('stroke','#000')
            .attr('stroke-width','1px')
            groupArc.append('text')
            .attr('transform',d=>{
                let pointer = arc1.centroid(d);
                return `translate(${pointer[0]*3},${pointer[1]*3})`
            })
            .text(d=>d.data.name)
            .attr('text-anchor','middle')
        }
    },
    mounted() {
        this.draw()
        this.drawPie()
    }
}
</script>
